<template>
  <div class="main-content">
    <el-header>
      <span class="op-left">
      <label>产品型号：</label>
      <el-select v-model="defaultProduct" class="el-select el-select-group">
        <el-option v-for="(op, value) in productList" :key="value" :label="op.text" :value="op.value"></el-option>
      </el-select>
      <el-button class="el-button--primary" @click="queryTestList">查询</el-button>
        </span>
      <el-button class="el-button--primary add-btn" @click="testOptionAddButton">添加测试用例</el-button>
    </el-header>
    <el-table :data="testItemList" stripe border>
      <el-table-column prop="id" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="用例名称" align="center"></el-table-column>
      <el-table-column prop="model" label="产品型号" align="center"></el-table-column>
      <el-table-column prop="content" label="测试命令" align="center"></el-table-column>
      <el-table-column prop="manual" label="是否人工判断" :formatter="formatBoolean" align="center"></el-table-column>
      <el-table-column prop="step" label="测试步骤" align="center"></el-table-column>
      <el-table-column prop="preResult" label="预期结果" align="center"></el-table-column>

      <el-table-column fixed="right" label="操作" align="center" width="180px">
        <template v-slot:default="scope">
          <el-button @click="testOptionEditPre(scope.row)">编辑</el-button>
          <el-button @click="testOptionRemovePre(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

      <el-dialog
          :visible.sync="dialogVisible"
          title="添加测试用例"
          width="50%"
          :before-close="handleClose">

        <div>

          <el-form :model="testItem">
            <el-form-item label="用例名称：" :label-width="formLabelWidth">
              <el-input v-model="testItem.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品型号：" :label-width="formLabelWidth">
              <el-select v-model="testItem.model" class="el-select el-select-group">
                <el-option v-for="(op, value) in productList" :key="value" :label="op.text" :value="op.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="测试命令：" :label-width="formLabelWidth">
              <el-input v-model="testItem.content" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否人工判断：" :label-width="formLabelWidth">
              <el-checkbox  v-model="testItem.manual"></el-checkbox>
            </el-form-item>
            <el-form-item label="测试步骤：" :label-width="formLabelWidth">
              <el-input type="textarea"  v-model="testItem.step" ></el-input>
            </el-form-item>
            <el-form-item label="预期结果：" :label-width="formLabelWidth">
              <el-input v-model="testItem.preResult" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>

        </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="testOptionCancel">取消</el-button>
        <el-button type="primary" @click="testOptionAdd">确认</el-button>
      </span>
      </el-dialog>

  </div>
</template>

<script>
import Vue from "vue";
import {UseUrl} from "~/utils/config";

export default {
  name: "testItemManager",
  data() {
    return {
      dialogVisible: false,
      defaultProduct:"frozen",
      productList: [
        {text:"frozen", value:"frozen"},
        {text:"mt1", value:"mt1"}
      ],
      testItemList:[],
      formLabelWidth: '120px',
      testItem: {
        id:"",
        name: "",
        model: "",
        content: "",
        step: "",
        preResult: "",
        manual: false
      }
    }
  },
  methods: {
    addItem: function() {
      console.log("do something");
      this.dialogVisible = true;
    },
    handleClose: function() {
      this.dialogVisible = false;
    },
    formatBoolean: function(row, column, cellValue) {
      var ret = ''
      if (cellValue) {
        ret = "是"
      } else {
        ret = "否"
      }
      return ret
    },
    queryTestList: function() {
      var that = this;
      this.result = "请求中...";
      Vue.axios.get(UseUrl + "/autotest/get/"+ this.defaultProduct,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        // console.log(response.data);
        that.testResult = "queryList: " + response.data.message;
        if (response.data.code === 0) {
          that.testItemList = response.data.Result.items;
        }
      }).catch((error => {
        // console.log(error);
        this.testResult = error;
      }))
    },
    testOptionAddButton: function() {
      this.dialogVisible = true;
      this.testItem = {
        id:"",
        name: "",
        model: "",
        content: "",
        step: "",
        preResult: "",
        manual: false
      };
    },
    testOptionAdd: function() {
      var that = this;

      var params = {};
      params["item"] = this.testItem;
      // console.log(params);
      if (this.testItem.id !== undefined && this.testItem.id !== "")
      {
        console.log("this is edit id = ", this.testItem.id);
        var str = JSON.stringify(params);
        Vue.axios.post(UseUrl + "/autotest/test_option/update",str,
            {headers:{'Content-Type':'application/json; charset=utf-8'}}
        ).then((response) => {
          // console.log(response.data);
          if (response.data.code === 0) {
            that.dialogVisible = false;
            that.testItemList.forEach((initem, index, array) => {
              if (that.testItem.id === initem["id"]) {
                that.testItemList[index] = response.data.item;
              }
            });
          } else {
            that.$message.error(response.data.message);
          }
        }).catch((error => {
          that.$message.error(error);
        }))

      } else {
        var str = JSON.stringify(params);
        Vue.axios.post(UseUrl + "/autotest/test_option/add", str,
            {headers: {'Content-Type': 'application/json; charset=utf-8'}}
        ).then((response) => {
          // console.log(response.data);
          if (response.data.code === 0) {
            that.dialogVisible = false;
            that.testItemList.push(response.data.item);
          } else {
            that.$message.error(response.data.message);
          }
        }).catch((error => {
          that.$message.error(error);
        }))
      }
    },
    testOptionRemovePre: function(item) {
      this.$confirm('确定要删除 ' + item.name + ' 吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning',
        center: true
      }).then(async () => {
        this.testOptionRemove(item);
      })
    },
    testOptionRemove: function(item) {
      var that = this;

      var params = {};
      params["id"] = item.id;
      var str = JSON.stringify(params);
      Vue.axios.post(UseUrl + "/autotest/test_option/remove",str,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        // console.log(response.data);
        if (response.data.code === 0) {
          // that.testItemList.push(response.data.item);
          that.$message.info("remove success");
          that.testItemList.forEach((initem, index, array) => {
            if (item.id === initem["id"]) {
              that.testItemList.splice(index, 1);
            }
          });
        } else {
          that.$message.error(response.data.message);
        }
      }).catch((error => {
        that.$message.error(error);
      }))
    },
    testOptionEditPre: function(item) {
      var that = this;

      this.testItem = item;
      this.dialogVisible = true;
    },
    testOptionCancel: function() {

      this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
.main-content {
  padding: 10px;
}
.add-btn {
  float: right;
}
.op-left {
  float: left;
}

.dialog-footer button:first-child {
  margin-right: 10px;
  margin-top:1em;
}

</style>